<template>
  <div id="pay">
    <scroll class="scroll">
      <user-info :isShowGrade="false" :user-info="userInfo"></user-info>
      <pay-list></pay-list>
      <router-view></router-view>
    </scroll>
  </div>
</template>

<script lang="js">
import {defineComponent, reactive, ref} from 'vue'
import UserInfo from '@/components/user-info/user-info.vue';
import { useState } from '@/hooks'
import PayList from './child/pay-list/pay-list.vue';
import Scroll from '@/components/scroll/scroll.vue'
export default defineComponent({
  props: {

  },
  components: {
    Scroll,
    UserInfo,
    PayList
  },
  setup() {
    const userInfoState = useState(["userInfo"])

    return {
      ...userInfoState
    }

  }
})
</script>

<style scoped lang="less">
#pay {
  padding-bottom: 16vw;
  .scroll {
    height: calc(100vh - 16vw);
    .pay-{
      color: var(--van-theme-color);
    }
  }
}
</style>
